<template>
    <div class="apps-container" v-loading="loading" element-loading-text="加载中...">
        <el-table :data="runtimeList" height="100%" style="width: 100%;border-radius: 5px;">
            <el-table-column prop="App" label="appId" width="180" />
            <el-table-column prop="ContainerID" label="容器ID" width="180" />
            <el-table-column prop="Pid" label="进程ID" width="100" />
            <el-table-column prop="Path" label="玲珑目录" />
            <el-table-column fixed="right" label="操作" width="120">
                <template #default="scope">
                    <!-- 停止按钮 -->
                    <el-button class="uninstall-btn" v-if="!scope.row.isInstalled && !scope.row.loading"
                        @click="stopPross(scope.row)">停止</el-button>
                    <el-button v-if="!scope.row.isInstalled && scope.row.loading" loading>停止中</el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
</template>
<script setup lang="ts">
import { onMounted, onBeforeUnmount, ref } from 'vue';
import { ipcRenderer } from "electron";
import { ElNotification } from 'element-plus'
import { RunTime } from "@/interface";

const loading = ref(true);
let runtimeList = ref([] as RunTime[]);
// 监听命令事件
const commandResult = (_event: any, res: any) => {
    const command: string = res.param.command;
    if (command == 'll-cli ps' && 'stdout' == res.code) {
        const apps: string[] = (res.result as string).split('\n');
        if (apps.length > 1) {
            for (let index = 1; index < apps.length - 1; index++) {
                const runItem: string = apps[index].trim();
                const items: RegExpMatchArray | null = runItem.match(/'[^']+'|\S+/g);
                if (items) {
                    const runTime: RunTime = {
                        App: items[0],
                        ContainerID: items[1],
                        Pid: items[2],
                        Path: items[3],
                    }
                    runtimeList.value.push(runTime);
                }
            }
        }
        loading.value = false;
        // 刷新表格视图
        runtimeList.value = [...runtimeList.value];
    }
    if (command.startsWith('ll-cli kill') && 'stdout' == res.code) {
        if ((res.result as string).trim().endsWith('success')) {
            // 弹出提示框
            ElNotification({
                title: '提示',
                message: "操作成功",
                type: 'info',
                duration: 500,
            });
            runtimeList.value.splice(0, runtimeList.value.length);
        }
        // 发送操作命令
        ipcRenderer.send('command', { command: "ll-cli ps" });
    }
}
// 停止服务按钮点击事件
const stopPross = (item: RunTime) => {
    const { ContainerID } = item;
    ipcRenderer.send('command', { command: `ll-cli kill ${ContainerID}` });
}

onMounted(() => {
    // 发送操作命令
    ipcRenderer.send('command', { command: "ll-cli ps" });
    ipcRenderer.on('command-result', commandResult);
})
onBeforeUnmount(() => {
    ipcRenderer.removeListener('command-result', commandResult);
})
</script>
<style scoped>
.uninstall-btn {
    background-color: red;
    color: white;
    padding: 6px;
    height: 24px;
}
</style>